<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套定义——父组件和子组件</title>
</head>
<body>
<div id="app">
  <parent></parent>
</div>

<template id="child">
  <h2>这是子组件</h2>
</template>

<template id="parent">
  <h1>这是父组件</h1>
  <child></child>
</template>

<script type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";
    import {defineComponent} from "../../../../js/vue.esm-browser.js";

    let child = defineComponent(
            {
              template:"#child"
            }
    );

    let parent = defineComponent(
            {
              template: "#parent",
              components:{
                child
              }
            }
    );

    let app = createApp({
        setup(){
            return {}
        },
      components: {
          parent,
      }
    })

    app.mount("#app")
</script>
</body>
</html>